<template>
  <div class="pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <div class="head">
      <span>{{name}}: 推文列表</span>
    </div>
    <div style="display: flex; justify-content: space-between" class="m-t-b">
      <div>
        <el-input
          style="width: 260px;"
          v-model="searchText"
          :placeholder="'请输入' + (type == 1 ? '文章' : (type == 2 ? '视频' : '系列')) + '名称就行搜索'"
          @keypress.enter.native="handleSearch"
          @input="clearSearch"
        />
        <el-button
          style="margin-left: 10px;"
          type="primary"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button
        type="primary"
        @click="lookChartData"
      >
        <i class="el-icon-data-line"></i>
        查看统计
      </el-button>
    </div>
    <el-tabs type="border-card" class="m-t-b" v-model="type" @tab-click="tabClick">
      <el-tab-pane name="1" label="文章">
        <el-table :data="articleList" stripe border v-loading="articleLoading" class="m-t-b">
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="文章封面图">
            <template slot-scope="scope">
              <img
                :src="scope.row.knowledgePic"
                style="width: 200px;"
              />
            </template>
          </el-table-column>
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.knowledgeStatus == 0">待审核</el-tag>
              <el-tag type="success" v-else-if="scope.row.knowledgeStatus == 1">审核通过</el-tag>
              <el-tag type="danger" v-else-if="scope.row.knowledgeStatus == 2">审核失败</el-tag>
              <el-tag type="danger" v-else-if="scope.row.knowledgeStatus == 3">管理员禁用</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="文章标题" prop="knowledgeName"></el-table-column> -->
          <el-table-column label="浏览数" prop="browse"></el-table-column>
          <el-table-column label="点赞数" prop="collection"></el-table-column>
          <!-- <el-table-column label="发布企业全称" prop="enterpriseName"></el-table-column>
          <el-table-column label="发布企业简称" prop="forShort"></el-table-column>
          <el-table-column label="发布企业logo">
            <template slot-scope="scope">
              <img :src="scope.row.companyLogo" style="width: 80px; height: 80px;" />
            </template>
          </el-table-column> -->
          <el-table-column label="创建时间" prop="createDate"></el-table-column>
          <el-table-column label="是否启用">
            <template slot-scope="scope">
              <el-switch
                :disabled="scope.row.knowledgeStatus != 1 || scope.row.knowledgeStatus != 3"
                v-model="scope.row.enable"
                active-text="启用"
                inactive-text="禁用"
                @change="handleChange(scope.row, $event)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <!-- <el-button type="" @click="lookArticleDetail(scope.row)">查看文章内容</el-button>
              <el-button type="primary" v-if="roleTitle === '超级管理员'" @click="setToAd(scope.row)">设为广告</el-button> -->
              <el-button
                icon="el-icon-view"
                circle
                @click="lookArticle(scope.row)"
                style="margin-right: 10px;"
              ></el-button>
              <el-popover
                placement="bottom"
                trigger="click"
                v-if="scope.row.knowledgeStatus == 0"
              >
                <div>
                  <el-button type="primary" @click="checkAuthorityStatus(scope.row, 1)">通过审核</el-button>
                  <el-button type="danger" @click="checkAuthorityStatus(scope.row, 2)">驳回审核</el-button>
                </div>
                <el-button
                  slot="reference"
                  icon="el-icon-s-check"
                  circle
                  type="primary"
                ></el-button>
              </el-popover>

              <!-- <el-button
                style="margin-left: 10px;"
                icon="el-icon-delete"
                circle type="danger"
                @click="delArticle(scope.row)"
              ></el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handlePagi"
          :total="articleTotal"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane name="2" label="视频">
        <el-table :data="videoList" stripe border v-loading="videoLoading" class="m-t-b">
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="视频封面图">
            <template slot-scope="scope">
              <img
                :src="scope.row.knowledgePic"
                style="width: 200px;"
              />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createDate"></el-table-column>
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.knowledgeStatus == 0">待审核</el-tag>
              <el-tag type="success" v-else-if="scope.row.knowledgeStatus == 1">审核通过</el-tag>
              <el-tag type="danger" v-else-if="scope.row.knowledgeStatus == 2">审核失败</el-tag>
              <el-tag type="danger" v-else-if="scope.row.knowledgeStatus == 3">管理员禁用</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="视频标题" prop="knowledgeName"></el-table-column> -->
          <el-table-column label="浏览数" prop="browse"></el-table-column>
          <el-table-column label="点赞数" prop="collection"></el-table-column>
          <!-- <el-table-column label="发布企业全称" prop="enterpriseName"></el-table-column>
          <el-table-column label="发布企业简称" prop="forShort"></el-table-column>
          <el-table-column label="发布企业logo">
            <template slot-scope="scope">
              <img :src="scope.row.companyLogo" style="width: 80px; height: 80px;" />
            </template>
          </el-table-column> -->
          <el-table-column label="是否启用">
            <template slot-scope="scope">
              <el-switch
                :disabled="scope.row.knowledgeStatus != 1"
                v-model="scope.row.enable"
                active-text="启用"
                inactive-text="禁用"
                @change="handleChange(scope.row, $event)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <!-- <el-button type="priamry" @click="lookVideo(scope.row)">查看视频</el-button>
              <el-button type="primary" v-if="roleTitle === '超级管理员'" @click="setToAd(scope.row)">设为广告</el-button> -->
              <el-button
                style="margin-right: 10px;"
                icon="el-icon-view"
                circle
                @click="lookVideo(scope.row)"
              ></el-button>
              <el-popover
                v-if="scope.row.knowledgeStatus == 0"
                placement="bottom"
                trigger="click"
              >
                <div>
                  <el-button type="primary" @click="checkAuthorityStatus(scope.row, 1)">通过审核</el-button>
                  <el-button type="danger" @click="checkAuthorityStatus(scope.row, 2)">驳回审核</el-button>
                </div>
                <el-button
                  slot="reference"
                  icon="el-icon-s-check"
                  circle
                  type="primary"
                ></el-button>
              </el-popover>
              <!-- <el-button
                style="margin-left: 10px;"
                icon="el-icon-delete"
                circle type="danger"
                @click="delVideo(scope.row)"
              ></el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handlePagi"
          :total="videoTotal"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane name="3" label="系列"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  changeShowStatus,
  getKnowledgeList,
  changeAuthorityStatus,
} from '../api/version2'
import { formatDate } from '../util';
export default {
  name: 'CompanyKnowledge',
  props: ['id', 'name'],
  data () {
    return {
      type: '1',
      articleLoading: false,
      videoLoading: false,
      seriesLoading: false,
      articleList: [],
      videoList: [],
      seriesList: [],
      articleTotal: 0,
      videoTotal: 0,
      seriesTotal: 0,
      searchText: '',
      pageSize: 10,
      roleTitle: '',
      title: '',
    }
  },
  methods: {
    fetchKnowledgeList (index) { // 查询知识列表
      const loadingKey = this.type == 1 ? 'articleLoading' : (this.type == 2 ? 'videoLoading' : 'seriesLoading');
      this[loadingKey] = true;
      getKnowledgeList({
        index,
        count: this.pageSize,
        queryParam: {
          knowledgeType: Number(this.type) - 1,
          enterpriseId: this.id,
          knowledgeName: this.searchText || null
        }
      })
      .then(res => {
        this[loadingKey] = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'ZH');
          item.id = item.knowledgeId.slice(5);
          item.enable = Boolean(item.knowledgeLife)
        });
        this[this.type == 1 ? 'articleList' : (this.type == 2 ? 'videoList' : 'seriesList')] = list;
        this[this.type == 1 ? 'articleTotal' : (this.type == 2 ? 'videoTotal' : 'seriesTotal')] = res.data.data.totalRecord
      })
      .catch(e => {
        this[loadingKey] = false
      })
    },
    goBack () {
      history.back()
    },
    lookChartData () { // 进入数据展示
      this.$router.push('/operation/analysis?enterpriseId=' + this.id)
    },
    handleSearch () { // 搜索
      if (!this.searchText.trim()) {
        return this.$message.error('搜索内容不能为空')
      };
      if (this.type != 3) {
        this.fetchKnowledgeList(1)
      }
    },
    clearSearch () { // 清除搜索
      if (this.type == 3) return;
      if (!this.searchText.trim()) {
        this.fetchKnowledgeList(1)
      }
    },
    lookVideo (row) { // 查看视频
      this.$router.push(`/operation/video/detail/${row.knowledgeId}`)
    },
    tabClick () { // tab切换
      if (this.type == 1 && !this.articleList.length) {
        this.fetchKnowledgeList(1)
      } else if (this.type ==2 && !this.videoList.length) {
        this.fetchKnowledgeList(1)
      } else if (this.type == 3) {

      }
    },
    lookArticle (article) { // 查看文章详情
      this.$router.push(`/operation/article/detail/${article.knowledgeId}`)
    },
    handleChange (data, e) { // 改变状态
      this.$confirm(`${e ? '启用' : '禁用'}该视频后, ${e ? '该视频可在客户端正常展示' : '该视频不在客户端展示'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        this.fetchSetStatus2(data.knowledgeId, e ? 1 : 3)
      })
      .catch(err => {
        data.enable = !e
      })
    },
    handlePagi (page) { // 分页
      this.fetchKnowledgeList(page)
    },
    fetchSetStatus1 (knowledgeId, type) { // 设置显示状态
      changeShowStatus({
        knowledgeId: knowledgeId,
        knowledgeLife: type
      })
      .then(res => {
        this.$message.success('操作成功');
        this.fetchKnowledgeList(1)
      })
      .catch(e => {

      })
    },
    fetchSetStatus2 (knowledgeId, type) { // 设置审核状态
      changeAuthorityStatus({
        knowledgeId: knowledgeId,
        knowledgeStatus: type
      })
      .then(res => {
        this.$message.success('操作成功');
        this.fetchKnowledgeList(1)
      })
      .catch(e => {

      })
    },
    checkAuthorityStatus (data, type) { // 改变审核状态
      this.$confirm(`确定${type == 1 ? '通过' : '驳回'}该视频的发布申请吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        this.fetchSetStatus2(data.knowledgeId, type)
      })
      .catch(err => {

      })
    },
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.fetchKnowledgeList(1)
  }
}
</script>
<style lang="scss">

</style>
